import React from 'react'
import { DatePicker, Space } from 'antd'
import moment from 'moment'
const { RangePicker } = DatePicker
const MyDatePicker = () => {
  const onChange1 = (date, dateString) => {
    console.log('base-> date:', date, 'dateString:', dateString)
  }
  const onOk1 = value => {
    console.log('onOk1:', value)
  }
  const disabledDate = current => {
    return current && current < moment().endOf('day')
  }
  return (
    <>
      <div className="box">
        <div className="box-header">base</div>
        <div className="box-body">
          <div className="box-content">
            <Space>
              <DatePicker onChange={onChange1}></DatePicker>
              <DatePicker onChange={onChange1} picker="week"></DatePicker>
              <DatePicker onChange={onChange1} picker="year"></DatePicker>
              <DatePicker onChange={onChange1} picker="month"></DatePicker>
              <DatePicker onChange={onChange1} picker="quarter"></DatePicker>
            </Space>
          </div>
        </div>
      </div>
      <div className="box">
        <div className="box-header">datetime&rangePicker</div>
        <div className="box-body">
          <div className="box-content">
            <Space>
              <DatePicker onChange={onChange1} showTime onOk={onOk1}></DatePicker>
              <RangePicker showTime={{ format: 'HH-mm' }} format="YYYY-MM-DD HH-mm" onChange={onChange1} onOk={onOk1}></RangePicker>
            </Space>
          </div>
        </div>
      </div>
      <div className="box">
        <div className="box-header">disabled</div>
        <div className="box-body">
          <div className="box-content">
            <Space>
              <RangePicker showTime disabledDate={disabledDate} onChange={onChange1} onOk={onOk1}></RangePicker>
            </Space>
          </div>
        </div>
      </div>
    </>
  )
}
export default MyDatePicker